import React, { useEffect, useState } from 'react'
import {HeartOutline  } from 'antd-mobile-icons'
import { Card ,InfiniteScroll} from 'antd-mobile'
function Mysslist({ data,page,hasMore }) {
    
    return (
        <div>
            {
                // 列表渲染
                data.length > 0 && data.map((item, index) => {
                    return <Card key={index} style={{ width: '340px', margin: '0 15px' }}>
                        <div style={{ width: '340px', position: 'relative' }}>
                            <img style={{ width: '90%', height: '60%' }} src={item.image} alt="" />
                            {/* 音乐会 */}
                            <span style={{
                                background: '#eee', width: '60px', height: '30px', lineHeight: '30px', borderRadius: '20px',
                                padding: '0 10px', position: 'absolute', top: '2px', left: '5px', zIndex: '9999'
                            }}>音乐会</span>
                            {/* 收藏 */}
                            <span style={{
                                background: '#eee', width: '30px', height: '30px', lineHeight: '30px', borderRadius: '20px',
                                position: 'absolute', top: '2px', right: '20px', zIndex: '9999', justifyContent: 'center'
                            }}><HeartOutline /></span>

                            <div style={{ display: 'flex', marginTop: '10px', justifyContent: 'space-between', width: '80%' }}>
                                <p>{item.title}</p>
                                <span style={{
                                    background: '#eee', width: '55px', height: '30px', lineHeight: '30px', borderRadius: '20px',
                                    padding: '0 10px', color: '#7d39dcff'
                                }}>{`￥${item.price}`}</span>
                            </div>
                            {/* 头像 */}
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <img style={{ width: '30px', height: '30px', borderRadius: '50%' }} src={item.image} alt="" /><span >kako</span>
                            </div>

                            {/* 下边栏 */}
                            <div style={{
                                display: 'flex', marginTop: '10px', justifyContent: 'space-between',
                                width: '80%', borderTop: '1px solid #ccc'
                            }}>
                                <span>182参与者</span>
                                <span style={{ color: '#ccc' }}>2024-2-11</span>
                            </div>
                        </div>
                    </Card>
                })
            }


            <InfiniteScroll loadMore={data} hasMore={hasMore} />
        </div>
    )
}

export default Mysslist
